<template>
  <el-container>
    <el-main>
      <el-descriptions title="路线申请" direction="horizontal" :column="2" border>
        <el-descriptions-item label="申请人">{{realName}}</el-descriptions-item>
        <el-descriptions-item label="联系电话">{{username}}</el-descriptions-item>
        <el-descriptions-item label="证件号码" :span="2">{{idCard}}</el-descriptions-item>
        <el-descriptions-item label="申请次数">{{applyTimes}}</el-descriptions-item>
        <el-descriptions-item label="大件类型">{{cargoType}}</el-descriptions-item>
        <el-descriptions-item label="申请通行时间" :span="2">{{beginDate+"至"+endDate}}</el-descriptions-item>
        <el-descriptions-item label="途径州市" :span="2">{{passCities}}</el-descriptions-item>
        <el-descriptions-item label="通行路线(推荐)" :span="2" v-if="whetherUseAdvice===1">{{suggestRoad}}
          <el-popover placement="right" :width="400" trigger="click">
            <template #reference>
              <el-button type="primary" ><el-icon><Search /></el-icon>点击显示地图</el-button>
            </template>
            <approval-map :begin="beginLngLat" :end="endLngLat"></approval-map>
          </el-popover>
        </el-descriptions-item>
        <el-descriptions-item label="通行路线(未推荐)" :span="2" v-if="whetherUseAdvice===0">{{initRoad}}

        </el-descriptions-item>
        <el-descriptions-item label="货物重量（吨）">{{ cargoWeight }}</el-descriptions-item>
        <el-descriptions-item label="车货总重量（吨）">{{ totalWeight }}</el-descriptions-item>
        <el-descriptions-item label="轴数（个）">{{ truckAxes }}</el-descriptions-item>
        <el-descriptions-item label="轮胎数（个）">{{ truckTyres }}</el-descriptions-item>
        <el-descriptions-item label="车辆目前状态">{{ currentCondition }}</el-descriptions-item>
      </el-descriptions>
      <el-row style="margin-top: 20px;margin-bottom: 20px">
        <el-col :span="4">
          审核时间:
        </el-col>
        <el-col :span="4" style="text-align: left">
          {{auditDate}}
        </el-col>
      </el-row>
      <el-row style="margin-top: 20px;margin-bottom: 20px">
        <el-col :span="4">
          审核结果:
        </el-col>
        <el-col :span="4" style="text-align: left">
          <span v-if="whetherPass" style="color: #409EFF">通过</span>
          <span v-if="!whetherPass" style="color: red">未通过</span>
        </el-col>
      </el-row>
      <el-row v-if="!whetherPass" style="margin-top: 20px;margin-bottom: 20px">
        <el-col :span="4">
          未通过理由:
        </el-col>
        <el-col :span="20" style="text-align: left">
          {{whetherPassReason}}
        </el-col>
      </el-row>

    </el-main>
  </el-container>
</template>

<script>
export default {
  name: "historyChild",
  props:{
    auditLogsId:Number,
    auditorUsername:String,
    auditDate:String,
    auditorRealName:String,
    whetherPass:Boolean,
    whetherPassReason:String,
    roadApplyLogsId:Number,
    realName:String,
    username:String,
    idCard: String,
    applyTimes: Number,
    cargoType: String,
    beginDate: String,
    endDate: String,
    passCities: String,
    initRoad: String,
    suggestRoad: String,
    cargoWeight: Number,
    totalWeight: Number,
    truckAxes: Number,
    truckTyres: Number,
    currentCondition: String,
    applyDate: String,
    beginLngLat:[],
    endLngLat:[],
    whetherUseAdvice:Number,

  },
}
</script>

<style scoped>

.el-container .el-main{
  height: 550px;
}
</style>